<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>万东影院 | 经理</title>
  <link th:href="@{/images/logo.svg}" rel="icon" type="image/svg+xml">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet">
</head>
<body>
<header>
  <ul class="nav nav-tabs m-2">
    <li class="nav-item">
      <a class="nav-link disabled">
        <i class="bi bi-person-circle"></i>
        <span class="ms-1">经理</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/manager/movies}">
        <i class="bi bi-film"></i>
        <span class="ms-1">电影列表</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link"
         th:href="@{/manager/screenings(byMovieId=${movie.getId()})}">
        <i class="bi bi-camera-reels"></i>
        <span class="ms-1">放映管理</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active">
        <i class="bi bi-plus-lg"></i>
        <span class="ms-1">添加放映</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi bi-graph-up"></i>
        <span class="ms-1">销售数据</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/manager/log}">
        <i class="bi bi-journals"></i>
        <span class="ms-1">操作日志</span>
      </a>
    </li>
    <li class="nav-item ms-auto">
      <a class="nav-link" th:href="@{/me}">
        <i class="bi bi-person-gear"></i>
        <span class="ms-1">账号管理</span>
      </a>
    </li>
  </ul>
</header>
<main class="d-flex justify-content-center align-items-center pt-1">
  <div class="container w-25 border rounded-3 mt-5 py-2">
    <a class="btn btn-link mt-1" th:href="@{/manager/screenings(byMovieId=${movie.getId()})}">返回</a>
    <div class="d-flex mb-3">
      <p class="mx-auto h4">添加放映</p>
    </div>
    <form class="d-flex flex-column gap-3" id="form">
      <input type="hidden" name="movieId" id="movieIdInput" th:value="${movie.getId()}">
      <div>
        <label for="movieTitleInput" class="form-label">要放映的电影</label>
        <input class="form-control" id="movieTitleInput" th:value="${movie.getTitle()}" disabled>
      </div>
      <div>
        <label for="hallIdInput" class="form-label">放映厅</label>
        <select id="hallIdInput" class="form-control" name="hallId">
          <option th:each="hall : ${halls}" th:value="${hall.getId()}"
                  th:text="${hall.getName()}"></option>
        </select>
      </div>
      <div>
        <label for="dateInput" class="form-label">放映日期</label>
        <input class="form-control" id="dateInput" name="date" type="date">
      </div>
      <div>
        <label for="startTimeInput" class="form-label">开始时间</label>
        <input class="form-control" id="startTimeInput" name="startTime" type="time">
      </div>
      <div>
        <label for="endTimeInput" class="form-label">结束时间</label>
        <input class="form-control" id="endTimeInput"
               disabled placeholder="结束时间" type="time">
      </div>
      <div>
        <label for="ticketPriceInput" class="form-label">票价</label>
        <input class="form-control" id="ticketPriceInput"
               placeholder="输入票价" name="ticketPrice">
      </div>
      <div class="d-flex flex-wrap gap-3 mt-2">
        <button class="btn btn-secondary flex-grow-1" type="reset">重置</button>
        <button class="btn btn-primary flex-grow-1"
                type="submit" id="submitButton">提交</button>
      </div>
    </form>
  </div>
</main>
<footer>
  <input type="hidden" id="durationInput" th:value="${movie.getRuntime().toMinutes()}">
</footer>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script>
const startTimeInput = document.getElementById("startTimeInput");
const endTimeInput = document.getElementById("endTimeInput");
const duration = parseInt(document.getElementById("durationInput").value);
const movieId = document.getElementById("movieIdInput").value;

// 自动计算结束时间
function calculateEndTime() {
  const startTime = startTimeInput.value;
  if (!startTime) return;

  const [hours, minutes] = startTime.split(':').map(Number);
  const startDate = new Date();
  startDate.setHours(hours, minutes, 0, 0);

  const endDate = new Date(startDate.getTime() + duration * 60 * 1000);

  const endHours = String(endDate.getHours()).padStart(2, '0');
  const endMinutes = String(endDate.getMinutes()).padStart(2, '0');
  endTimeInput.value = `${endHours}:${endMinutes}`;
}

startTimeInput.addEventListener("change", calculateEndTime);

const form = document.getElementById("form");
const submitButton = document.getElementById("submitButton");

async function submitForm() {
  const formData = new FormData(form);

  const data = {};
  formData.forEach((value, key) => {
    data[key] = value;
  });

  try {
    const response = await axios.post('/api/screenings', data, {
      headers: {'Content-Type': 'application/json'}
    });

    if (response.status === 200) {
      alert("添加放映成功");
      location.href = `/manager/screenings?byMovieId=${movieId}`
    }
  } catch (error) {
    if (!error.response) {
      console.log(error);
    }
    else if (error.response.status === 400) {
      alert(error.response.data);
    }
    else if (error.response.status === 409) {
      alert(error.response.data);
    }
  }
}

submitButton.addEventListener("click", event => {
  event.preventDefault();
  submitForm();
});
</script>
</body>
</html>